<template>
	<view class="page">
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
		<topVue>
			<view class="slotVue flex align-center padding-row30">
				<u-icon name="map-fill" color="#333" size="30"></u-icon>
				<text class="fw600">武汉市</text>
			</view>
		</topVue>
		<!-- #endif -->

		<!-- 轮播图 -->
		<view class="swiperVue margin0">
			<u-swiper :list="list" :height="300" :autoplay="true" :interval="4000" :border-radius="20" name="img"></u-swiper>
		</view>

		<!-- 线下相亲活动 -->
		<view class="listVue">
			<view class="flex-between align-center">
				<view class="title fw600">线下相亲活动</view>
				<view class="flex align-center" @click="$tools.route('../person/activity_join')">
					<text>我的活动</text>
					<image src="../../static/more.png" style="width: 36rpx; height: 36rpx; margin: 0 -10rpx 0 5rpx"></image>
				</view>
			</view>
			<view class="item" v-for="(item, index) in 2" :key="index">
				<indexItem :item="item"></indexItem>
			</view>
		</view>

		<!-- 往届活动 -->
		<view class="listVue">
			<view class="flex-between align-center">
				<view class="title fw600">往届活动</view>
			</view>
			<view class="item" v-for="(item, index) in 2" :key="index">
				<indexItem :item="item"></indexItem>
			</view>
		</view>

		<!-- 悬浮发布活动按钮 -->
		<movable-area class="movable-area">
			<movable-view
				class="movable-view flex-center align-center"
				:x="x"
				:y="y"
				:position="position"
				direction="all"
				@change="onChange"
				@touchend="onTouchend"
				@click="$tools.route('publish')"
			>
				<image src="../../static/index/publish.png" mode="" style="width: 108rpx; height: 108rpx"></image>
			</movable-view>
		</movable-area>

		<!-- 测试 -->
		<u-popup v-model="show" mode="center" @close="close">
			<view class="popupVue relative">
				<image src="../../static/index/activity.png" style="width: 292rpx; height: 278rpx; top: 0; z-index: 99" class="absolute-center"></image>
				<view class="popupContent absolute">
					<view class="title fw600 fs36 text-center">测试</view>
					<view class="text-center margin40">MBTI测试，让你自己更了解自己</view>
					<view class="btnVue flex-between margin70">
						<view class="cancel" @click="show = false">取消</view>
						<view class="apply" @click="toTest()">开始测试</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 完善信息 -->
		<u-popup v-model="show1" mode="center" @close="close">
			<view class="popupVue relative">
				<image src="../../static/index/activity.png" style="width: 292rpx; height: 278rpx; top: 0; z-index: 99" class="absolute-center"></image>
				<view class="popupContent absolute">
					<view class="title fw600 fs36 text-center">提示</view>
					<view class="text-center margin40" style="padding: 0 65rpx; line-height: 45rpx">
						完善个人信息后可生成专属AI婚恋分析 报告另赠送价值
						<text style="color: #fc132f">299</text>
						会员
					</view>
					<view class="btnVue flex-between margin70">
						<view class="cancel" @click="show1 = false">暂不完善</view>
						<view class="apply" @click="$tools.navigateTo('/pages/login/setInfo')">完善信息</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import indexItem from './components/indexItem.vue';
export default {
	components: {
		indexItem
	},
	data() {
		return {
			list: [
				{ img: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
				{ img: 'https://cdn.uviewui.com/uview/swiper/2.jpg' },
				{ img: 'https://cdn.uviewui.com/uview/swiper/3.jpg' }
			],
			x: 375,
			y: 500,
			position: 4,
			x1: 0,
			x2: 0,
			y1: 0,
			y2: 0,
			move: {
				x: 0,
				y: 0
			},
			show: false,
			show1: true
		};
	},
	onLoad() {
		this.getWindowWidth();
		this.getLocation();
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	// #ifdef MP-WEIXIN
	// 发送给朋友
	onShareAppMessage(res) {
		// 来自页面内分享按钮
		if (res.from === 'button') {
			console.log(res);
		}
		return {
			title: 'title', //自定义分享标题
			path: '/pages/activity/index', //	自定义分享页面的路径
			imageUrl: '' // 自定义分享小图标元素，支持网络图片路径、apFilePath 路径和相对路径。
		};
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: 'title',
			path: '',
			imageUrl: ''
		};
	},
	// #endif

	methods: {
		onTouchend() {
			this.x = this.move.x;
			this.y = this.move.y;
			setTimeout(() => {
				if (this.move.x < this.x2 / 2) this.x = this.x1;
				else this.x = this.x2;
			}, 100);
		},
		getWindowWidth() {
			let _this = this;
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000);
				}
			});
		},
		onChange(e) {
			this.move.x = e.detail.x;
			this.move.y = e.detail.y;
		},
		getLocation() {
			let _this = this;
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success(res) {
					console.log(res);
					console.log(res.longitude);
					console.log(res.latitude);
					_this.address = res.address.city;
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		close() {
			uni.showTabBar();
		},
		toTest() {
			uni.showTabBar();
			this.show = false;
			this.$tools.route('../person/test');
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.u-mode-center-box {
	background-color: transparent !important;
}
.popupVue {
	width: 600rpx;
	height: 640rpx;
	.popupContent {
		width: 600rpx;
		height: 540rpx;
		background: linear-gradient(180deg, #f0e9f8, #f0e9f8, #fde5e7, #fbeff1, #fdfafc, #fff);
		left: 0;
		bottom: 0;
		border-radius: 40rpx;
		.title {
			color: #333;
			padding-top: 178rpx;
		}
		.btnVue {
			padding: 0 50rpx;
			.cancel {
				width: 240rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 42rpx;
				border: 1rpx solid #eeeeee;
				color: #999;
				font-weight: 600;
			}
			.apply {
				width: 240rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 42rpx;
				background: #fc132f;
				border-radius: 42rpx;
				color: #fff;
				font-weight: 600;
			}
		}
	}
}
.slotVue {
	width: 100%;
	height: 100%;
	text {
		padding-left: 8rpx;
	}
}
// 轮播图
.swiperVue {
	width: 690rpx;
	height: 320rpx;
	padding-top: 20px;
}
//活动列表
.listVue {
	width: 100%;
	padding: 30rpx 30rpx 0;
	.title {
		font-size: 30rpx;
	}
}
</style>
